import { RewardLog } from '@/apis/draw';
import Bg from '@/assets/my-1.png';
import { useState } from 'react';
import { Overlay } from 'react-vant';
import { useQuery } from 'umi';
import useSuccess from './useSuccess';

import CloseIcon from '@/assets/close-1.png';
import ViewButton from '@/assets/my-2.png';

export default function useMyPrize() {
  const [visible, setVisible] = useState<boolean>(false);

  // ?获取中奖记录
  const { data, refetch } = useQuery(['get:reward:log'], () => RewardLog());

  const { renderNode: renderSuccessNode, open: openSuccess } = useSuccess({
    onSuccess: function () {
      //这里刷新中奖记录， 或者用户信息等。
    },
  });

  function renderNode() {
    return (
      <>
        <Overlay
          onClick={() => handleClose()}
          zIndex={99}
          visible={visible}
          className=" flex flex-col items-center pt-[200px]"
        >
          <div
            className=" flex flex-col my-2 bg-cover bg-no-repeat w-[604px] h-[796px] pt-[220px] relative text-white px-6"
            style={{
              backgroundImage: `url(${Bg})`,
            }}
          >
            <button
              onClick={() => handleClose()}
              className=" w-8 h-8 bg-cover absolute right-0 -top-12 active:scale-95"
              style={{
                backgroundImage: `url(${CloseIcon})`,
              }}
            />

            <div className="max-h-[520px] overflow-auto">
              {data?.map((item, index) => (
                <div
                  key={item.id}
                  className=" border-b border-dashed border-white flex items-center py-3"
                >
                  <h1 className=" text-xl font-bold flex-1">
                    {index + 1}.{item.prize_name}
                  </h1>
                  <button
                    className="w-[110px] h-[46px] bg-cover active:scale-95"
                    style={{
                      backgroundImage: `url(${ViewButton})`,
                    }}
                    onClick={() => {
                      openSuccess(item.id);
                    }}
                  />
                </div>
              ))}
            </div>
          </div>
        </Overlay>
        {renderSuccessNode()}
      </>
    );
  }

  function handleClose() {
    setVisible(false);
  }

  return {
    open: async function () {
      refetch();
      setVisible(true);
    },
    renderNode,
  };
}
